<!-- #layout name=blank --sideType='market'-->
<div id="app">
  <div class="page-header">
    <h1 class="title">My Orders</h1>
  </div>

  <kb-breadcrumb :breads="breads"></kb-breadcrumb>

  <kb-table :data="tableData">
    <kb-table-column
      :label="Kooboo.text.common.name"
      prop="name"
    ></kb-table-column>
    <kb-table-column :label="Kooboo.text.common.type" head-class="table-short">
      <template v-slot="row">
        <span :class="['label', row.type.class]">{{ row.type.text }}</span>
      </template>
    </kb-table-column>
    <kb-table-column
      :label="Kooboo.text.common.amount"
      head-class="table-short"
    >
      <template v-slot="row">
        <span :class="['label', row.amount.class]">{{ row.amount.text }}</span>
      </template>
    </kb-table-column>
    <kb-table-column
      :label="Kooboo.text.common.startTime"
      head-class="table-short"
    >
      <template v-slot="row">
        <span :class="['label', row.startTime.class]"
          >{{ row.startTime.text }}</span
        >
      </template>
    </kb-table-column>
    <kb-table-column
      :label="Kooboo.text.common.endMonth"
      head-class="table-short"
    >
      <template v-slot="row">
        <span :class="['label', row.endMonth.class]"
          >{{ row.endMonth.text }}</span
        >
      </template>
    </kb-table-column>
    <kb-table-column head-class="table-action" body-class="table-action">
      <template v-slot="row">
        <a class="btn btn-sm blue" @click.stop="renew(row.id)">
          {{ row.renew.text }}
        </a>
      </template>
    </kb-table-column>
  </kb-table>
  <kb-pager
    :page-nr="pager.pageNr"
    :total-pages="pager.totalPages"
    @change="changePage"
  ></kb-pager>
  <hardware-modal
    :is-show.sync="showHardwareModal"
    :data="hardwareData"
  ></hardware-modal>
  <cashier-modal></cashier-modal>
</div>
<script>
  (function() {
    Kooboo.loadJS([
      "/_Admin/Scripts/components/kbBreadcrumb.js",
      "/_Admin/Scripts/components/kbTable.js",
      "/_Admin/Scripts/components/kbPager.js",
      "/_Admin/View/Market/Scripts/components/HardwareModal.js",
      "/_Admin/View/Market/Scripts/components/CashierModal.js"
    ]);
  })();
</script>
<script src="/_Admin/View/Market/Scripts/Kooboo.Market.js"></script>
<script src="/_Admin/View/Market/Hardware/MyOrders.js"></script>
